<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		.menu {
			font-size: 18px;
			border: 1px solid black;
			border-radius: 10px 10px 10px 10px;
			width: 100px;
			height: 100px;
			display: none;
			position: absolute;
		}

		.a {
			list-style-type: none;
			/* border-bottom: 1px solid black; */
			margin-left: -25px;

		}

		.img {
			width: 25px;
			height: 75px;
			margin-left: 10px;
			/* background-color: #FFE8A1; */
		}

		.cz {
			width: 51px;
			height: 75px;
			margin-top: -90px;
			margin-left: 30px;
		}

		a:visited {
			text-decoration: none;
			color: green
		}
	</style>
	<body>
		<span>自定义鼠标右键信息</span>
		<div class="menu">
			<div class="img">
				<img src="res04/ico.png">
				<img src="res04/ico1.png">
				<img src="res04/ico2.png">
			</div>
			<div class="cz">
				<ul>
					<li class="a"><a href="">剪切</a></li>
					<li class="a"><a href="">复制</a></li>
					<li class="a"><a href="">粘贴</a></li>
				</ul>
			</div>

		</div>
		<script type="text/javascript">
			document.oncontextmenu = function() {
				// alert("已禁用鼠标右键");
				return false;
			}
			$(function() {
				$(document).mousedown(function(event) {
					if (event.button == 2) {
						// 显示自定义菜单
						$(".menu").css({
							//定义菜单显示位置为事件发生的X坐标和Y坐标
							top: event.clientY,
							left: event.clientX
						}).slideDown(100);
						//如果点击鼠标左键，隐藏菜单
					} else if (event.button == 0) {
						$(".menu").slideUp(100);
					}
				})
			})
		</script>
	</body>
</html>
